<!-- 短信登入 -->

<template>
    <div class="smsdlogin">
        
        <el-form-item label="手机号"  >
            <el-input maxlength="11"  class="txt1" v-model="phoneNumber"></el-input>
            <span  @click="sendSms" class="txt3" style="color: rgb(136, 136, 136); line-height: 40px; text-decoration: underline; width:120px; ">{{msg}}</span>
        </el-form-item>
        
        <el-form-item label="验证码" >
            <el-input v-model="code" class="txt2" style="border-radius:5px"></el-input>
        </el-form-item>
        
        <el-form-item >
            <el-button type="primary" @click="submit">提交</el-button>
        </el-form-item>
    </div>
</template>

<script>
import * as api from "../../api/users";

export default{
   props: ["storageUserInfo"],
  data() {
    return {
      msg: "点击发送验证码",
      flag: true,
      phoneNumber: "",
      code: "",
    };
  },
  methods: {
    async sendSms() {
      if (this.flag) {
        this.flag = false;
        // 调用接口,发送验证码
        let res = await api.getSmsCode(this.phoneNumber);
        //如果短信发送成功
        if (res.data.state) {
          this.$message({
            message: "短信发送成功",
            type: "success",
          });
        } else {
          this.$message.error(res.data.msg);
        }
        // console.log(res);
        let delay = 5;
            this.msg = `${delay}秒后重新发送`;
        this.interval = setInterval(() => {
          delay--;
          if (delay < 1) {
            this.msg = '点击发送验证码';
            clearInterval(this.interval);
            this.flag = true;
          } else {
            this.msg = `${delay}秒后重新发送`;
          }
        }, 1000);
      }
    },
    async submit() {
      let res = await api.smsLogin(this.code);
      // console.log(res);
      // 调用父组件方法存储用户信息
      this.storageUserInfo(res.data);
      // 跳转页面
      this.$router.push("/");
    },
  },
};


// validate 检验一次被触发
</script>

<style lang="less" scoped>
/deep/.el-input__inner{
   border-radius: 0 !important;
   border: 0;
}
/deep/.txt1{
    width: 150px !important;
    
}
/deep/.txt2{
    width:300px !important;
    border-radius:5px !important;
}
/deep/.el-form-item__label{
    color: #16e6d6 !important;
}
/deep/.txt3{
    background: #FFF;
    display: inline-block;
    height: 40px;
    width: 120px;
    text-align: center;
    cursor: pointer;
    border-radius: 0 5px 5px 0; 
    padding: 0 15px;
}
.el-form-item .el-button {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
}
 .icon-wx{
    width: 25px;
    height: 25px;
    vertical-align: -7px;
    margin-right: 5px;
 }

</style>